<script setup>
import _ from 'lodash'
import { ref, defineProps } from 'vue'
import menu from './_menu';
import './dropdown.scss'; // 引入公共样式

var props = defineProps({
    icon: {
        type: String,
        default: ''
    },
    label: {
        type: String,
        default: ''
    },
    group: {
        type: Boolean,
        default: false
    },
    devided: {
        type: Boolean,
        default: false
    },
    events: {
        type: Object,
        default: () => { }
    }

})
const current = ref(null)
const switchOpenFn = () => {
    menu.switchOpen(current.value, open)
}
</script>
<template>
    <div ref="current" class="x-dropdown-item w-100 d-flex" :class="{ 'x-dropdown-group': group, devided: devided }"
        @click.stop="switchOpenFn" v-on="events">
        <div class="x-dropdown-item-icon m-0" v-if="group">
            <i class="iconfont te-i-more"></i>
        </div>
        <div v-else-if="icon" class="x-dropdown-item-icon">
            <i :class="icon"></i>
        </div>

        <div class="x-dropdown-item-label d-inline-blck" v-if="label"
        :class="group?'text-start':'text-end'">
            {{ label }}
        </div>
        <div class="x-dropdown-item-content w-100">
            <slot></slot>
        </div>
    </div>
</template>